<template>
  <div>
    <a-modal v-model:visible="visible" :title="title" @ok="handleOk"  width="40%" :afterClose="closeMoadal">
      <a-form :model="formData" ref="formRef" labelAlign="right" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }"
       >

        <a-form-item label="医院名称：" name="h_name" :rules="[{ required: true }]">
          <a-input allowClear v-model:value="formData.h_name" :maxlength="25" placeholder="请输入" />
        </a-form-item>

        <a-form-item label="联系电话："  name="phone" :rules="[{ required: true }]">
          <a-input allowClear v-model:value="formData.phone" :maxlength="25" placeholder="请输入" />
        </a-form-item>

        <a-form-item label="最大可预约人数："  name="max_num" :rules="[{ required: true }]">
          <a-input allowClear v-model:value="formData.max_num" type="number" :maxlength="25" placeholder="请输入" />
        </a-form-item>

        <a-form-item label="更换医院照片：" >
          <Upload @getImgpath="getImgpath"></Upload>
        </a-form-item>

      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { ref,reactive } from 'vue';
import { editehosiptal } from '@/common/http.api.js'
import Upload from '@/components/upload/index.vue'

const emitFrensh = defineEmits(['on-close']) // 注册事件
const props = defineProps({
  data: {
    type: Object,
    default: {},
  },

});

const visible = ref(true)
const frensh = ref(0)
const title = ref('修改医院信息')

const formData = reactive({
  hID: props.data.hID,
  h_name: props.data.h_name,
  phone: props.data.phone,
  max_num: props.data.max_num,
  img: props.data.img
});

const getImgpath = (url)=>{
  formData.img = url
}

const handleOk =  async () => {
  await editehosiptal(formData)
  message.success('修改成功！')
  frensh.value ++
  visible.value = false
}

function closeMoadal() {
  emitFrensh('on-close', frensh.value)
}

</script>

<style lang="less" scoped>

</style>